<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        img{
            width: 200px;
        }
    </style>
</head>
<script src="../jquery/jquery-3.2.1.min.js"></script>
<body>
    <p>数据渲染</p>
    <ul class="list">
        <li>
            <img src="" alt="">
        </li>
        <span></span>
    </ul>
    <script>
        $.ajax({
            method:"get",
            url:"http://localhost:3000/banner",
            data:{},
            success:data=>{
                console.log(data.x_data);
                let str = "";
                //原生的渲染
                // for(let i = 0; i < data.x_data.length; i++){
                //     console.log(data.x_data[i]);
                //     str += 
                //     `<li>
                //         <img src="${data.x_data[i].src}" alt="" srcset="">
                //         <span>${data.x_data[i].name}</span>
                //     </li>`
                // }
                // console.log(str);
                // $(".list").html(str);

                //jquery渲染
                $.each(data.x_data,(index)=>{
                    str += `<li>
                                <img src="${data.x_data[index].src}" alt="" srcset="">
                                <span>${data.x_data[index].name}</span>
                            </li>`
                })
                $('.list').html(str);
            },
            error:err=>{
                console.log(err);
            }
        })
    </script>
</body>
</html>